{% extends "../_base/layout.html" %} 
{% block css %}
<link rel="stylesheet" href="{{site.static}}/lib/swiper/swiper.min.css">
<link rel="stylesheet" href="{{site.static}}/css/index_video.css"> 
{% endblock %}
{% block js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="{{site.static}}/js/index/video.js"></script>
{% endblock %}
{% block content %} 
    {% block header%}
    {% set pageHeaderConf = {pageTitle:__("video_page_title"),level:2,icon:'eui-icon-grid btn-show-siderbar'} %} 
    {% include "../_base/page_header.html" %} 
    {% endblock %}

<div class="eui-main-container eui--padding-b-0 video-main-container">
    <div class="eui-page-banner eui--margin-y-20" id="page_banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" data-bacg="{{site.cdn}}/test-banner-bacg.jpg">                                        
                    <span class="eui-icon eui-icon-play-btn"></span>
                    <a href="">
                        <img src="{{site.cdn}}/test-swiper01.png" class="display-b" alt="">
                        <p class="swiper-slide-desc eui--black-white-gradient-bacg">我是萌萌哒图片标题，点我1！</p>
                    </a>
                </div>
                <div class="swiper-slide" data-bacg="{{site.cdn}}/test-banner.jpg">
                    <span class="eui-icon eui-icon-play-btn"></span>                
                    <a href="">
                        <img src="{{site.cdn}}/test-swiper01.png" class="display-b" alt="">
                        <p class="swiper-slide-desc eui--black-white-gradient-bacg">我是萌萌哒图片标题，点我1！</p>
                    </a>
                </div>
                <div class="swiper-slide" data-bacg="{{site.cdn}}/test-banner-bacg.jpg">
                    <span class="eui-icon eui-icon-play-btn"></span>                
                   <a href="">
                        <img src="{{site.cdn}}/test-swiper01.png" class="display-b" alt="">
                        <p class="swiper-slide-desc eui--black-white-gradient-bacg">我是萌萌哒图片标题，点我1！</p>
                    </a>
                </div>
            </div>
        </div>
    </div>        
    <div class="eui-card eui--white-bacg">
        <div class="eui-card-header" id="card_header">
            {{__("video_card_title")}}            
        </div>
        <div class="eui-card-content eui--margin-x-16">
            <ul class="eui-table-view video-list">
                <li class="eui-table-view-cell">
                    <div class="eui-media">
                        <div class="eui-media-header eui--clearfix">
                            <span class="eui-icon eui-icon-play-btn"></span>
                            <img class="eui-media-img eui--width-100" src="{{site.cdn}}/test-banner.jpg">
                            <span class="video-time">04:30</span>
                        </div>
                        <div class="eui-media-body eui--font-24 eui--position-rel eui--clearfix">
                            <img src="{{site.cdn}}/test-game-icon01.png" class="eui--pull-left" alt="">
                            <div class="eui-media-object eui--pull-left">
                                <a class="eui-media-object-body eui--black-color" href="/video/videoDetail">我是视频名称，最多可显示两行最少显示一行。每30个字符，右侧留空，不填满，参考YouTube。</a>
                                <div class="eui-media-object-footer eui--clearfix">
                                    <div class="eui--pull-left">
                                        <span class="eui-icon eui-icon-play-btn_sm"></span> 9999
                                    </div>
                                    <div class="eui--pull-right">
                                        <span class="eui-icon eui-icon-clock"></span> 08-26
                                    </div>
                                </div>
                            </div>
                            <span class="eui-icon eui-icon-dotted"></span>
                        </div>
                    </div>
                </li>
                <li class="eui-table-view-cell">
                    <div class="eui-media">
                        <div class="eui-media-header eui--clearfix">
                            <span class="eui-icon eui-icon-play-btn"></span>
                            <img class="eui-media-img eui--width-100" src="{{site.cdn}}/test-banner.jpg">
                            <span class="video-time">04:30</span>
                        </div>
                        <div class="eui-media-body eui--font-24 eui--position-rel eui--clearfix">
                            <img src="{{site.cdn}}/test-game-icon01.png" class="eui--pull-left" alt="">
                            <div class="eui-media-object eui--pull-left">
                                <a class="eui-media-object-body eui--black-color" href="/video/videoDetail">我是视频名称，最多可显示两行最少显示一行。每30个字符，右侧留空，不填满，参考YouTube。</a>
                                <div class="eui-media-object-footer eui--clearfix">
                                    <div class="eui--pull-left">
                                        <span class="eui-icon eui-icon-play-btn_sm"></span> 9999
                                    </div>
                                    <div class="eui--pull-right">
                                        <span class="eui-icon eui-icon-clock"></span> 08-26
                                    </div>
                                </div>
                            </div>
                            <span class="eui-icon eui-icon-dotted"></span>
                        </div>
                    </div>
                </li>
                <li class="eui-table-view-cell">
                    <div class="eui-media">
                        <div class="eui-media-header eui--clearfix">
                            <span class="eui-icon eui-icon-play-btn"></span>
                            <img class="eui-media-img eui--width-100" src="{{site.cdn}}/test-banner.jpg">
                            <span class="video-time">04:30</span>
                        </div>
                        <div class="eui-media-body eui--font-24 eui--position-rel eui--clearfix">
                            <img src="{{site.cdn}}/test-game-icon01.png" class="eui--pull-left" alt="">
                            <div class="eui-media-object eui--pull-left">
                                <a class="eui-media-object-body eui--black-color" href="/video/videoDetail">我是视频名称，最多可显示两行最少显示一行。每30个字符，右侧留空，不填满，参考YouTube。</a>
                                <div class="eui-media-object-footer eui--clearfix">
                                    <div class="eui--pull-left">
                                        <span class="eui-icon eui-icon-play-btn_sm"></span> 9999
                                    </div>
                                    <div class="eui--pull-right">
                                        <span class="eui-icon eui-icon-clock"></span> 08-26
                                    </div>
                                </div>
                            </div>
                            <span class="eui-icon eui-icon-dotted"></span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div> 
    {% block allGame%}
    {% include "../common/all_game.html" %} 
    {% endblock %}  

    {% block shareFooter%}
    {% include "../common/video_share_footer.html" %} 
    {% endblock %}  
</div>
{% endblock %}